<!--首页的主要内容区域-->
<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <div class="mainBox">
      <!-- swiper 区域 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiper" :key="index">
          <img :src="item.img" style="width: 100%; height: 170px" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类区域 -->
      <van-grid>
        <van-grid-item
          v-for="item in menus"
          :key="item"
          :icon="item.img"
          :text="item.info[0].value"
        />
      </van-grid>
      <!--公告栏-->
      <van-notice-bar left-icon="fire-o" :scrollable="false">
        <span>热点资讯公告：</span>
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="item in newsData"
            :key="item"
            v-text="item.chiild[0].val"
          ></van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <!-- 商品列表栏 -->
      <van-list
        v-model:loading="dataState.loading"
        :finished="dataState.finish"
        finished-text="没有更多了"
        @load="getProducts"
      >
        <products :products-list="productsList" class="productsBox"></products>
      </van-list>
    </div>
  </van-pull-refresh>
</template>

<script setup>
import Products from "@/components/Products/index.vue";
import { computed, reactive, ref } from "@vue/reactivity";
import { moren } from "@/api/home";
import { productList } from "@/api/product";
// 申明一个响应式数据,存储后台请求数据
const list = ref({});
// 封装请求后台数据的函数
const initData = async () => {
  let { data } = await moren();
  if (data.status === 200) {
    list.value = data.data;
    refreshing.value = false
  } else {
    return;
  }
}
initData();
// 轮播图数据
const swiper = computed(() => list.value.swiperBg?.default.imgList.list);
const menus = computed(() => list.value.menus?.default.imgList.list);
const newsData = computed(() => list.value.news?.default.newList.list);

// 产品列表功能
let page = 1;
let limit = 4;
let productsList = ref([]);
let dataState = reactive({
  loading: false,
  finish: false,
});
const getProducts = async () => {
  dataState.loading = true;
  let { data } = await productList({
    page,
    limit,
  })
  if (data.status != 200) return
  // 请求每次得到的是新一段数据，需要将新数据添加到 productsList 中
  productsList.value = [...productsList.value, ...data.data];
  // 加载状态结束
  dataState.loading = false
  // 数据全部加载完成
  if (data.data.length < limit) {
    dataState.finish = true
    return
  }
  page++
}
// 下拉刷新功能
let refreshing = ref(false)
function onRefresh () {
  // 清除当前页的数据内容
  list.value = []
  productsList.value = []
  // 将页数清为1
  page = 1
  // 上拉加载的状态改为false
  dataState.loading = false
  dataState.finish = false
  // 重新请求这两个数据
  initData()
  getProducts()
}

</script>

<style lang="scss" scoped>
.mainBox {
  background: #f7f7f7;
  padding: 50px 0 55px;
}
:deep(.van-notice-bar__content) {
  display: flex;
  align-items: center;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.productsBox {
  margin-top: 10px;
}
</style>
